<template>
  <div :class="city == 1 ? 'dragDemo' : 'dragDemo m'">
    <ul class="tabNav">
      <li
        :class="tabNav == 1 ? 'cut' : ''"
        @click="toggleNav(1)"
        style="margin-left: 40%;"
      >
        表单设计
      </li>
      <li :class="tabNav == 2 ? 'cut' : ''" @click="toggleNav(2)">流程设计</li>
      <li :class="tabNav == 3 ? 'cut' : ''" @click="toggleNav(3)">
        <router-link to="/indexForm">新表单demo</router-link>
      </li>
    </ul>
    <!--列表1-->
    <draggable
      class="listLeft"
      element="div"
      v-model="listLeft"
      :options="dragOptions1"
      :move="onMove"
      @start="isDragging = true"
      @end="isDragging = false"
    >
      <div class="li" v-for="(item, key) in listLeft" :key="key">
        {{ item.name }}
        <i v-if="item.value == 'inputText'" class="layui-icon">&#xe679;</i>
        <i v-else-if="item.value == 'textarea'" class="layui-icon">&#xe66b;</i>
        <i v-else-if="item.value == 'select'" class="layui-icon">&#xe625;</i>
        <i v-else-if="item.value == 'checkbox'" class="layui-icon">&#xe64e;</i>
        <i v-else-if="item.value == 'radio'" class="layui-icon">&#xe643;</i>
        <i v-else-if="item.value == 'switch'" class="layui-icon">&#xe642;</i>
        <i v-else-if="item.value == 'formDataTime'" class="layui-icon"
          >&#xe637;</i
        >
        <i v-else-if="item.value == 'personnel'" class="layui-icon">&#xe770;</i>
        <i v-else-if="item.value == 'upImg'" class="layui-icon">&#xe64a;</i>
        <i v-else-if="item.value == 'upFolder'" class="layui-icon">&#xe64c;</i>
        <i v-else class="layui-icon">&#x1007;</i>
      </div>
    </draggable>
    <!--PC后台列表-->
    <draggable
      class="list-group layui-form"
      element="div"
      v-model="listRight"
      :options="dragOptions2"
      :move="onMove"
      :scroll="true"
      @start="rightStart"
      @add="addList"
      @end="rightEnd"
      v-show="city == 1"
    >
      <div
        :class="listCurShu == key ? 'li cur' : 'li'"
        v-for="(item, key) in listRight"
        :key="key"
        @click="listCur(key)"
      >
        <!-- 单行输入框 -->
        <div
          class="layui-form-item"
          :class="item.value + 'Pc'"
          v-if="item.value == 'inputText'"
        >
          <label class="layui-form-label">{{ item.name }}</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="title"
              lay-verify="title"
              autocomplete="off"
              :placeholder="item.placeholder"
              class="layui-input"
            />
          </div>
        </div>
        <!-- 多行输入框 -->
        <div
          class="layui-form-item layui-form-text"
          v-else-if="item.value == 'textarea'"
        >
          <label class="layui-form-label">{{ item.name }}</label>
          <div class="layui-input-block">
            <textarea
              :placeholder="item.placeholder"
              class="layui-textarea"
            ></textarea>
          </div>
        </div>
        <!-- 下拉列表 -->
        <div class="layui-form-item" v-else-if="item.value == 'select'">
          <label class="layui-form-label">{{ item.name }}</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="title"
              lay-verify="title"
              autocomplete="off"
              :placeholder="item.placeholder"
              class="layui-input"
            />
            <i
              class="layui-icon"
              style="position: absolute;right: 8px;top: 9px;color: #999;"
              >&#xe625;</i
            >
          </div>
        </div>
        <!-- 多选框 -->
        <div class="layui-form-item" v-else-if="item.value == 'checkbox'">
          <label class="layui-form-label">{{ item.name }}</label>
          <div class="layui-input-block">
            <span class="checkbox">选择一</span>
            <span class="checkbox">选择二</span>
          </div>
        </div>
        <!-- 单选框 -->
        <div class="layui-form-item" v-else-if="item.value == 'radio'">
          <label class="layui-form-label">{{ item.name }}</label>
          <div class="layui-input-block">
            <span class="radio">选择一</span>
            <span class="radio">选择二</span>
          </div>
        </div>
        <!-- 开关按钮 -->
        <div class="layui-form-item" v-else-if="item.value == 'switch'">
          <label class="layui-form-label">{{ item.name }}</label>
          <div class="layui-input-block">
            <img src="../images/switch.jpg" />
          </div>
        </div>
        <!-- 日期 -->
        <div class="layui-form-item" v-else-if="item.value == 'formDataTime'">
          <label class="layui-form-label">{{ item.name }}</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="title"
              lay-verify="title"
              autocomplete="off"
              :placeholder="item.placeholder"
              class="layui-input"
            />
          </div>
        </div>
        <!-- 人员选择 -->
        <div class="layui-form-item" v-else-if="item.value == 'personnel'">
          <label class="layui-form-label">{{ item.name }}</label>
          <div class="layui-input-inline">
            <input
              type="text"
              name="title"
              lay-verify="title"
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <div class="layui-form-mid layui-word-aux">
            {{ item.placeholder }}
          </div>
        </div>
        <!-- 图片上传 -->
        <div class="layui-form-item" v-else-if="item.value == 'upImg'">
          <label class="layui-form-label">{{ item.name }}</label>
          <div class="layui-input-inline" style="width: 115px;">
            <button type="button" class="layui-btn upBut">
              <i class="layui-icon">&#xe654;</i>上传图片
            </button>
          </div>
          <div class="layui-form-mid layui-word-aux">
            {{ item.placeholder }}
          </div>
          <p style="clear:both"></p>
          <div class="imgZw">
            <span id="moren">图片预览</span>
          </div>
        </div>
        <!-- 图片上传 -->
        <div class="layui-form-item" v-else-if="item.value == 'upFolder'">
          <label class="layui-form-label">{{ item.name }}</label>
          <div class="layui-input-inline" style="width: 115px;">
            <button type="button" class="layui-btn upBut">
              <i class="layui-icon">&#xe654;</i>上传附件
            </button>
          </div>
          <div class="layui-form-mid layui-word-aux">
            {{ item.placeholder }}
          </div>
        </div>
        <div v-else class="layui-form-item">
          {{ item.name }}
        </div>
        <i class="layui-icon delIcon" @click="delLi(key)">&#x1007;</i>
      </div>
    </draggable>
    <!--移动端列表-->
    <div class="Mbj" v-show="city == 2">
      <draggable
        class="list-group0"
        element="div"
        v-model="listRight"
        :options="dragOptions2"
        :move="onMove"
        @start="rightStart"
        @add="addList"
        @end="rightEnd"
      >
        <div
          :class="listCurShu == key ? 'li cur' : 'li'"
          v-for="(item, key) in listRight"
          :key="key"
          @click="listCur(key)"
        >
          <!-- 单行输入框 -->
          <div
            class="inputText"
            :class="item.value + 'Pc'"
            v-if="item.value == 'inputText'"
          >
            <span class="t">{{ item.name }}</span>
            <span class="placeholder">{{ item.placeholder }}</span>
          </div>
          <!-- 多行输入框 -->
          <div class="textarea" v-else-if="item.value == 'textarea'">
            <span class="t">{{ item.name }}</span>
            <p class="placeholder">{{ item.placeholder }}</p>
          </div>
          <!-- 下拉列表 -->
          <div class="inputText" v-else-if="item.value == 'select'">
            <span class="t">{{ item.name }}</span>
            <span class="placeholder">
              {{ item.placeholder }}
              <i class="layui-icon">&#xe625;</i>
            </span>
          </div>
          <!-- 多选框 -->
          <div class="inputText" v-else-if="item.value == 'checkbox'">
            <span class="t">{{ item.name }}</span>
            <span class="placeholder">
              {{ item.placeholder }}
              <i class="layui-icon">&#xe625;</i>
            </span>
          </div>
          <!-- 单选框 -->
          <div class="inputText" v-else-if="item.value == 'radio'">
            <span class="t">{{ item.name }}</span>
            <span class="placeholder">
              {{ item.placeholder }}
              <i class="layui-icon">&#xe625;</i>
            </span>
          </div>
          <!-- 开关按钮 -->
          <div class="inputText" v-else-if="item.value == 'switch'">
            <span class="t">{{ item.name }}</span>
            <span class="placeholder"><img src="../images/switch.jpg" /> </span>
          </div>
          <!-- 日期 -->
          <div class="inputText" v-else-if="item.value == 'formDataTime'">
            <span class="t">{{ item.name }}</span>
            <span class="placeholder">
              {{ item.placeholder }}
              <i class="layui-icon">&#xe625;</i>
            </span>
          </div>
          <!-- 人员选择 -->
          <div class="inputText" v-else-if="item.value == 'personnel'">
            <span class="t">{{ item.name }}</span>
            <span class="placeholder">
              {{ item.placeholder }}
              <i class="layui-icon">&#xe625;</i>
            </span>
          </div>
          <!-- 图片上传 -->
          <div
            class="inputText"
            v-else-if="item.value == 'upImg'"
            style="margin-bottom: 10px;"
          >
            <span class="t">
              {{ item.name }}
              <span style=" font-size: 12px;color: #999;">
                （{{ item.placeholder }}）</span
              >
            </span>
            <span class="placeholder">
              <i class="layui-icon Upimg">&#xe60d;</i>
            </span>
          </div>
          <!-- 附件上传 -->
          <div
            class="inputText"
            v-else-if="item.value == 'upFolder'"
            style="margin-bottom: 10px;"
          >
            <span class="t">
              {{ item.name }}
              <span style=" font-size: 12px;color: #999;">
                （{{ item.placeholder }}）</span
              >
            </span>
            <span class="placeholder">
              <i class="layui-icon Upimg">&#xe608;</i>
            </span>
          </div>

          <div v-else class="layui-form-item">
            {{ item.name }}
          </div>
          <i class="layui-icon delIcon" @click="delLi(key)">&#x1007;</i>
        </div>
      </draggable>
    </div>
    <div class="footer">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <label class="layui-form-label">切换表单模式：</label>
          <div class="layui-input-block">
            <select name="city" lay-verify="required" v-model="city">
              <option value="1">PC后台</option>
              <option value="2">移动端</option>
            </select>
          </div>
        </div>
      </form>
    </div>
    <div class="configure layui-form">
      <div
        v-model="listRight"
        v-for="(item, key) in listRight"
        :key="key"
        v-show="listCurShu == key"
      >
        <!-- 单行输入框 -->
        <div
          class="inputText"
          :class="item.value + 'm'"
          v-if="item.value == 'inputText'"
        >
          <div id="commonField">
            <div class="layui-form-item">
              <label class="layui-form-label">字段名称</label>
              <div class="layui-input-block">
                <input
                  id="FIELD_NAME"
                  name="FIELD_NAME"
                  placeholder=""
                  class="layui-input"
                  type="text"
                  v-model="item.name"
                />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">提示语</label>
              <div class="layui-input-block">
                <input
                  id="FIELD_DESC"
                  name="FIELD_DESC"
                  placeholder=""
                  class="layui-input"
                  type="text"
                  v-model="item.placeholder"
                />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">必填</label>
              <div class="layui-input-block">
                <input
                  id="FIELD_REQUIRE"
                  name="FIELD_REQUIRE"
                  lay-filter="filter"
                  value="1"
                  lay-skin="switch"
                  lay-text="是|否"
                  type="checkbox"
                />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">另存对象（自行处理）</label>
              <div class="layui-input-block">
                <input
                  id="OBJECT_NAME"
                  name="OBJECT_NAME"
                  placeholder=""
                  class="layui-input"
                  type="text"
                  v-model="item.OBJECT_NAME"
                />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">另存对象字段（自行处理）</label>
              <div class="layui-input-block">
                <input
                  id="OBJECT_FIELD"
                  name="OBJECT_FIELD"
                  placeholder=""
                  class="layui-input"
                  type="text"
                  v-model="item.OBJECT_FIELD"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 单行输入框 -->
        <div class="inputText" :class="item.value + 'm'" v-else>
          <p style="text-align: center; margin-top: 23px;color: #666;">
            未配置{{ item.name }}
          </p>
        </div>
      </div>
      <!--{{listRight}}-->
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
var form;
layui.use("form", function() {
  form = layui.form;
});
var dataList = [
  {
    name: "单行输入框",
    value: "inputText",
    placeholder: "请输入内容",
    switch: false,
    OBJECT_NAME: "",
    OBJECT_FIELD: ""
  },
  {
    name: "多行输入框",
    value: "textarea",
    placeholder: "请输入内容"
  },
  {
    name: "下拉列表",
    value: "select",
    placeholder: "点击选择"
  },
  {
    name: "多选框",
    value: "checkbox",
    placeholder: "点击选择"
  },
  {
    name: "单选框",
    value: "radio",
    placeholder: "点击选择"
  },
  {
    name: "开关按钮",
    value: "switch",
    placeholder: "点击选择"
  },
  {
    name: "日期",
    value: "formDataTime",
    placeholder: "点击选择时间"
  },
  {
    name: "人员选择",
    value: "personnel",
    placeholder: "点击选择人员"
  },
  {
    name: "上传图片",
    value: "upImg",
    placeholder: "大小不能超过8M"
  },
  {
    name: "上传附件",
    value: "upFolder",
    placeholder: "大小不能超过8M"
  }
];
export default {
  name: "dragDemo",
  components: {
    draggable
  },
  data() {
    return {
      tabNav: 1,
      city: 1, //切换表单模式 1PC 2APP
      isDragging: false,
      indexList: 0,
      listCurShu: 0,
      listLeft: [],
      listRight: [],
      oldleftlist: []
    };
  },
  computed: {
    dragOptions1() {
      return {
        animation: 0,
        group: {
          name: "description",
          pull: "clone"
        },
        ghostClass: "ghost", //停靠的样式
        chosenClass: "chosen" //选中的样式
      };
    },
    dragOptions2() {
      return {
        animation: 300,
        group: "description"
      };
    }
  },
  mounted() {
    this.listLeft = JSON.parse(JSON.stringify(dataList));
    this.listRight = JSON.parse(JSON.stringify(dataList));
  },
  methods: {
    addList() {
      form.render();
      this.listLeft = JSON.parse(JSON.stringify(this.listLeft));
      this.listRight = JSON.parse(JSON.stringify(this.listRight));
    },
    listCur(i) {
      this.listCurShu = i;
    },
    onMove({ relatedContext, draggedContext }) {
      this.indexList = relatedContext.index;
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;

      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      );
    },
    rightStart() {
      console.log("=---list", this.oldleftlist);
      this.oldleftlist = JSON.parse(JSON.stringify(this.listLeft.concat()));
      this.isDragging = true;
    },
    rightEnd() {
      form.render();
      console.log("--indexList", this.indexList);
      this.listCurShu = this.indexList;
      this.isDragging = false;
      //左边数据不变
      this.listLeft = JSON.parse(JSON.stringify(this.oldleftlist.concat()));
    },
    //删除队列
    delLi(index) {
      this.listRight.splice(index, 1);
    },
    toggleNav(val) {
      this.tabNav = val;
    }
  }
};
</script>
<style scoped>
@import "draggable.css";
</style>
